<template>
  <!--  设备告警列表 -->
  <div class="equipment-alarm-list flex flex-column">
    <antd-form
      :options="formOption"
      :label-col="8"
      :wrapper-col="16"
      @submit="formSubmit"
      class="flex-fixed"
      style="padding: 10px 15px"
    />
    <radio-group
      :data-list="radioDataList"
      v-model="is_handle"
      @change="() => $refs.Table.load()"
      class="flex-fixed"
      style="padding: 0 15px 10px"
    />
    <common-table
      class="flex-auto-height"
      ref="Table"
      :columns="tableColumns"
      :fetch-params="paramsData"
      :fetch="getTableList"
      :show-toolbar="false"
      @vue:mounted="() => $refs.Table.load()"
      :pagination="{ pageSize: 15 }"
    >
      <template #index="{ index }">{{ index + 1 }}</template>
      <template #action="{ scope }">
        <a-button type="link" @click="details(scope)">详情</a-button>
        <!--        <span style="color: #62b8b1; cursor: pointer" @click="details(scope)">详情</span> -->
      </template>
    </common-table>
  </div>
</template>

<script>
import areaCodeMixin from '@gis/lib/mixins/areaCodeMixin.js';
import { alarmPageList } from '@gis/lib/api';
import { alarmFieldEnum } from '../alarm/enum.js';
import { useDicDataStore } from '@gis/lib/pinia/dicData.js';
import { getEnumText } from '@gis/lib/enums/index.js';
import { showYanGanWarnDialog } from '../../components/warn-dialog/index.js';
import { openAlarmDetailsDialog } from '../alarm/alarm-details.js';

export default {
  name: 'equipment-alarm-list',
  mixins: [areaCodeMixin],
  data() {
    return {
      formData: {},
      is_handle: '',
      radioDataList: [
        { label: '所有', value: '' },
        { label: '未处理', value: '0' },
        { label: '已处理', value: '1' },
      ],
    };
  },
  computed: {
    paramsData() {
      return Object.assign({}, this.formData, this.apiParams, {
        warn_category_code: 'D0142_4',
        handle_status: this.is_handle,
      });
    },
    warnTypeCodeList() {
      const { getDicDataList } = useDicDataStore();
      return getDicDataList('D0142_4');
    },
    formOption() {
      return [
        {
          component: 'a-range-picker',
          label: '告警时间',
          field: 'start_time,end_time',
          props: {
            showTime: true,
            valueFormat: 'YYYY-MM-DD HH:mm:ss',
          },
        },
        {
          component: 'a-input',
          label: '设备名称',
          field: alarmFieldEnum['dev']['device_name'],
        },
        {
          component: 'a-input',
          label: '设备序列号',
          field: alarmFieldEnum['dev']['sn'],
        },
        {
          component: 'a-select',
          label: '告警类型',
          field: 'warn_type_code',
          props: {
            options: this.warnTypeCodeList,
          },
        },
      ];
    },

    tableColumns() {
      let columns = [
        { title: '告警时间', dataIndex: 'warn_time' },
        { title: '告警类型', dataIndex: 'warn_type_name' },
        { title: '告警内容', dataIndex: alarmFieldEnum['dev']['warn_describe'] },
        { title: '设备名称', dataIndex: alarmFieldEnum['dev']['device_name'] },
        { title: '设备序列号', dataIndex: alarmFieldEnum['dev']['sn'] },
        {
          title: '处理状态',
          dataIndex: alarmFieldEnum['dev']['is_handle'],
          customRender: (v) => getEnumText('alarmHandleStatus', v),
        },
        { title: '操作', dataIndex: 'action', scopedSlots: { customRender: 'action' }, align: 'left', width: 80 },
      ];
      return columns.filter((item) => {
        return 'visible' in item ? (typeof item.visible === 'function' ? item.visible() : !!item.visible) : true;
      });
    },
  },
  methods: {
    formSubmit(val) {
      this.formData = val;
      this.$nextTick(() => {
        this.$refs.Table.load();
      });
    },
    details(scope) {
      const { warn_type_code, warn_subclass_code } = scope;
      // 高抛 D0142_4_1 D0142_4_1_5、烟感 D0142_4_7 D0142_4_2_1
      // 设备告警类型 - 进行了更详细划分
      if (warn_type_code == 'D0142_4_1' || warn_type_code == 'D0142_4_7') {
        // if (warn_subclass_code == 'D0142_4_1_5' || warn_subclass_code == 'D0142_4_2_1') {
        showYanGanWarnDialog({ id: scope.id }, () => {
          this.$refs.Table.load();
        });
      } else {
        openAlarmDetailsDialog(scope, 'dev');
      }
    },
    async getTableList(params) {
      return this.handleTableResult(await alarmPageList(params));
    },
  },
};
</script>

<style scoped lang="less">
.equipment-alarm-list {
  width: 100%;
  height: 100%;
}
</style>
